import React, { PureComponent } from 'react';
import {
    View,
    FlatList,
    StyleSheet
} from 'react-native';
import { observer, inject } from 'mobx-react'
import { Container, ListFooterComponent } from '../../component'
import RepoCard from './component/RepoCard';
import { Actions } from 'react-native-router-flux';

@inject('yuqueStore')
@observer
export default class Yuque extends PureComponent {

    componentDidMount() {
        this.props.yuqueStore.getUsers()
    }

    _renderRepos() {
        const { repos, docs } = this.props.yuqueStore
        return (
            <FlatList
                data={repos || []}
                ItemSeparatorComponent={() => <View style={{ height: 15, }} />}
                keyExtractor={(item) => `${item.id}`}
                ListFooterComponent={<ListFooterComponent hasMore={false} />}
                renderItem={({ item }) => {
                    return (
                        <RepoCard
                            docs={docs ? docs[item.id] : null}
                            onDocPress={this._onDocPress}
                            repo={item}
                        />
                    )
                }}
                style={{ paddingTop: 10, flex: 1, }}
            />
        )
    }

    _onDocPress(doc, docUrl) {
        Actions.webViewScreen({
            title: doc.title,
            url: docUrl,
        })
    }

    render() {
        return (
            <Container
                naviBarProps={{
                    title: '语雀文档',
                    leftElement: null,
                    // rightElement: <Image source={{ uri: avatarUrl }} style={styles.userAvatar} />
                }}>
                {this._renderRepos()}
            </Container>
        )
    }
}

const styles = StyleSheet.create({
    userAvatar: {
        width: 28,
        height: 28,
        borderRadius: 14,
    },
});